<template>
	<el-dialog title="查看社区排行详情" :modal-append-to-body="false" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="900px">
		<div>
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				<el-table-column prop="departmentName" label="社区名称" align="center"></el-table-column>
				<el-table-column label="所属日期" :formatter="forDate" prop="belongDay" width="250" align="center"></el-table-column>
				<el-table-column prop="credits" label="积分" align="center" width="280"></el-table-column>
			</el-table>
			
			<!-- 翻页 -->
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import dayjs from 'dayjs'
	import { getCommunityRankingDetail } from '@api/platform/platformMarketing'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getData();
				}
			},
		},
		methods: {
			getData() {
				getCommunityRankingDetail({
					departmentId: this.item.departmentId,
					createTimeBegin: this.item.rankingType == 'history' ? '' : dayjs(this.item.rankingStartDate).format('YYYY-MM-DD'),
					createTimeEnd: this.item.rankingType == 'history' ? '' : dayjs(this.item.rankingEndDate).format('YYYY-MM-DD'),
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getData();
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'belongDay') {
					return row.belongDay == null ? '-' : dayjs(row.belongDay).format('YYYY-MM-DD');
				}
			},
			
			close() {
				this.$emit('close');
				this.reset();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		margin-top: 20px;
	}
</style>